<template>
    <div>
       <div class="content"> 
        <div class="buttons">
          <el-button @click="addBtn($event)">添加</el-button>
        <el-button @click="putBtn($event)">修改</el-button>
        <el-button @click="delBtn($event)">删除</el-button>
        </div>
      </div>


      <el-table
        
          :data="tableData"
          :row-style="{height: '60px'}"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            type="selection"
            width="55px"
            fixed="left"
          >
        </el-table-column>

          <el-table-column
            label="序号"
            type="index"
          >
            <template scope="scope">
              <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>

          <el-table-column
            v-for="(item,index) in title"
            :key="index"
            :prop="item.prop"
            :label="item.label"
          >

            <!-- 提示 -->
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                :disabled="tooltipDisabled"
                effect="dark"
                placement="top-start"
              >
                <div
                  class="tableTooltip"
                  @mouseenter="spanMouseenter($event)"
                >{{ scope.row[item.prop] }}</div>
                <div
                  slot="content"
                  style="max-width: 200px;"
                >{{ scope.row[item.prop] }}</div>
              </el-tooltip>
            </template>

          </el-table-column>


        </el-table>
        <div class="page">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

            <!-- 新增修改 -->
            <div class="dialog">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="27.683%"
      center="center"
      :before-close="handleClose"
    >
      <!-- 弹窗内容 -->
      <div class="content">
        <el-form
          ref="submitData"
          :model="submitData"
          
          label-width="100px"
          class="demo-ruleForm"
        >

          <!-- 名字 -->
          <el-form-item
            label="名字:"
            prop="name"
          >
            <el-input
              v-model="submitData.name"
              placeholder="输入名字"
            />
          </el-form-item>


          <!-- 排序 -->
          <el-form-item
            label="排序:"
            prop="sort"
          >
            <el-input
              v-model="submitData.sort"
              placeholder="排序"
            />
          </el-form-item>

          <!-- 描述 -->
          <el-form-item
            label="描述:"
            prop="describe"
          >
            <el-input
              v-model="submitData.describe"
              placeholder="描述"
            />
          </el-form-item>


         

        </el-form>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <div class="footer_button">
          <el-button
            type="primary"
            @click="submitForm('submitData')"
          >提交</el-button>
        </div>
      </span>
    </el-dialog>
  </div>



       </div>
    
  </template>
  
  <script>
  import {getGoodsType} from "@/api/dataReq"
  import { req } from '@/api/basicReq'
  export default {
    name: 'goodstype',
    // components: {},
    // props:{
    //     names:{
    //         type:Array,
    //         default:()=>{return []}
    //     }
    // },
        

    data() {
      return {
        title: [
        { prop: 'name', label: '名字' },
        { prop: 'sort', label: '排序' },
        { prop: 'describe', label: '描述' },
       
      ],
      tableData: [],
      currentPage: 1, // 当前页数
      pageSize: 10, // 每页多少行
      total: 10, // 总页数
      multipleSelection: [], // 选中的
      imgShow: '',
      tooltipDisabled: true, // 控制tooltip显示
      loading: true,
      dialogVisible:false,
      submitData:{},
      dialogTitle: "新增",
      Method:"post",
      }
    },
    computed: {},
    created() {
      this.getData()
    },
    methods: {
      getData(){
        var reqData  ={
        page_size: this.pageSize,
        page_num: this.currentPage,
      }
      getGoodsType(reqData).then(response => {
        if (response.code == '1') {
          // console.log(response)
         this.tableData = response.data
         this.total = response.total

        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
      },

      handleSizeChange(){

      },
      handleCurrentChange(){

      },
      handleClick(){

      },
      handleClose(){

      },
      handleSelectionChange(){

      },
      spanMouseenter(ev) {
      if (ev.target.clientWidth < ev.target.scrollWidth) {
        this.tooltipDisabled = false
      } else {
        this.tooltipDisabled = true
      }
    },
    handleClose(){
      this.dialogVisible = false
    },

      handleClick(row){

      },
      handleSelectionChange(val) {
      this.selectData = val
    
  },
  handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getData()
    },
  addBtn(ev){
    this.dialogVisible = true

    this.dialogTitle = '添加'
    if (this.submitData) {
      this.submitData = {}
    }
    this.imgPath = ''
    this.addImgShow = false
    this.dialogVisible = true
    this.Method = 'post'
  },

  putBtn(ev){
    this.Method = 'put'
    this.dialogTitle = '修改'
    if (this.selectData.length == '1') {
      this.submitData = { ...this.selectData[0] }
      this.dialogVisible = true
      this.imgPath = cfg.img_url + this.submitData.img + '?' + Date.now()
      this.addImgShow = true
    } else if (this.selectData.length >= '1') {
      this.$message({
        message: '只能选择一条要修改的数据',
        type: 'warning'
      })
    } else {
      this.$message({
        message: '请先选择要修改的数据',
        type: 'warning'
      })
    }
  },
  delBtn(ev){
    if (this.selectData.length > 0) {
      const idList = []
      this.selectData.forEach((item) => {
        idList.push(item.id)
      })
      var data = {
        url: 'goods/GoodsType',
        method: 'delete',
        data: { id: idList }
      }
      req(data).then((res) => {
       
        if (res.code == 1) {
          this.$message.success('删除成功')
          if (
            idList.length == this.tableData.length &&
            this.currentPage != 1
          ) {
            this.currentPage--
          }
          this.getData()
        }
      })
    } else {
      this.$message({
        message: '请先选择要删除的数据',
        type: 'warning'
      })
    }
  },
  submitForm(){
    
    var reqData = {
      url: 'goods/GoodsType',
      method: this.Method,
      data: this.submitData
    }
    req(reqData).then(response => {
        if (response.code == '1') {
          if(this.Method=="post"){
            this.$message.success('新增成功')
          }else{
            this.$message.success('修改成功')
          }
          
          this.dialogVisible = false
          this.addImgShow = false
          this.getData()
        } else {
          
        }
      }).catch(error => {
        console.log('err', error)
        
      })
    // console.log(formData)
  },


    }
  }
  </script>
  <style lang="scss" scoped>

.content{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    .button {
      display: flex;
      justify-content: flex-start;
    }
  }
  .page{
    display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
  }
  </style>
  